<template>
  <van-swipe
    class="my-swipe"
    v-if="Object.keys(articleData).length > 0"
    duration="300"
    :height="400"
  >
    <van-swipe-item v-for="(item, index) in articleData.image" :key="index">
      <img :src="item" />
    </van-swipe-item>
    <template #indicator="{ active, total }">
      <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
    </template>
  </van-swipe>
  <!-- 作者 -->
  <div
    class="author-view global-display global-a-items"
    v-for="(item, index) in articleData.author"
    :key="index"
  >
    <img :src="item.avatarUrl" alt="" />
    <div class="author-name">
      <p>{{ item.nickname }}</p>
      <p>{{ articleData.time }}发布</p>
    </div>
    <div class="concern-author" @click="attentionAuthor">
      {{ attention ? "已关注" : "+ 关注" }}
    </div>
  </div>
  <!-- 城市 -->
  <div
    v-if="Object.keys(articleData).length > 0"
    class="article-city global-display global-a-items"
  >
    <p
      v-if="articleData.city != articleData.address"
      @click="chooseCity(articleData.city)"
    >
      {{ articleData.city }}
    </p>
    <p @click="chooseCity(articleData.address)">{{ articleData.address }}</p>
  </div>
  <!-- 文章 -->
  <div class="author-essay">
    <p>{{ articleData.title }}</p>
    <p>{{ articleData.content }}</p>
  </div>
  <!-- 评论区 -->
  <div class="Comment-area" v-if="commentsData.length > 0">
    <div
      class="Comment-users global-display"
      v-for="(item, index) in commentsData"
      :key="index"
    >
      <img :src="item.comment_user[0].avatarUrl" alt="" />
      <div class="Comment-content global-display global-f-direction">
        <p>{{ item.comment_user[0].nickname }}</p>
        <p>{{ item.content }}</p>
      </div>
      <div
        class="Comment-delete"
        v-if="item.user_uid == userUid"
        @click="deleteComment(item._id, index)"
      >
        删除
      </div>
    </div>
    <div class="View-more" @click="viewMore" v-if="commentsData.length >= 5">
      {{ moreComments }}
    </div>
  </div>
  <!-- 相关推荐 -->
  <div v-show="userTravels.length > 0">
    <p class="rec-the-same">相关推荐</p>
    <card :userTravels="userTravels" />
    <div class="View-more" v-if="userTravels.length >= 6" @click="onLoad">
      {{ moreRecommend }}
    </div>
  </div>
  <div style="height: 200px"></div>
  <!-- 底部：点赞，评价数，收藏 -->
  <div class="bottom-oper global-display global-a-items global-j-content">
    <div class="bottom-oper-feel" @click="show = true">谈谈感受</div>
    <div class="oper-number global-display">
      <div
        class="global-display global-a-items global-f-direction"
        v-for="(item, index) in bottomOper"
        :key="index"
        @click="operatingState(index)"
      >
        <img :src="item.status ? item.selectedIconPath : item.iconPath" />
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>
  <!-- 弹出评论框 -->
  <van-overlay :show="show" duration="0.2">
    <div class="Comment-input">
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="5"
          autosize
          autofocus
          type="textarea"
          placeholder="请输入评论"
        />
      </van-cell-group>
      <div class="global-display global-j-end">
        <van-button size="small" type="default" @click="show = false"
          >取消</van-button
        >
        <van-button size="small" type="success" @click="commentTravel"
          >发表</van-button
        >
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import Dianzan from "@/icon/index/dianzan.svg";
import Yidianzan from "@/icon/index/yidianzan.svg";
import Pinglun from "@/icon/index/pinglun.svg";
import Showcang from "@/icon/index/shoucang.svg";
import Yishowcang from "@/icon/index/yishoucang.svg";
import request from "@/api/request.js";
import emitter from "@/api/event.js";
import { useRoute } from "vue-router";
const $routeQuery = useRoute(); // 用于接收路由参数的
import card from "@/page/Common-components/card-flow.vue";
// pinia
import { dataSet } from "@/store/index.js";
const store = dataSet();
import { useRouter } from "vue-router";
const $router = useRouter(); // 这是路由跳转的

// 存储点赞，评论，收藏状态
const bottomOper = ref([
  {
    text: 0, //数量
    status: false, //状态
    iconPath: Dianzan, //未点赞图标
    selectedIconPath: Yidianzan, //已点赞图标
  },
  {
    text: 0,
    status: false,
    iconPath: Pinglun,
    selectedIconPath: Pinglun,
  },
  {
    text: 0,
    status: false,
    iconPath: Showcang,
    selectedIconPath: Yishowcang,
  },
]);
// 评论框是否显示
const message = ref("");
const show = ref(false);
const modal = ref({ show: false });
// 存储文章详情
const articleData = ref({});
// 存储评论数据
const commentsData = ref([]);
// 存储用户uid
const userUid = ref("");
// 存储关注状态
const attention = ref(false); //false：未关注，true：已关注
// 存储游记对象_id
const articleId = ref("");
// 存储该篇游记作者uid
const authorUid = ref("");
//存储相关推荐游记数据
const userTravels = ref([]);

// 请求接口:获取游记详情
onMounted(async () => {
  const _id = $routeQuery.query._id;
  await detailsTravel(_id);
});
async function detailsTravel(_id) {
  // 接收路由动态id
  articleId.value = _id;
  // 游记详情
  const article_data = await request.get("/article_data", {
    article_id: articleId.value,
  });
  console.log(article_data);
  // 游记评论数据
  const comments_data = await request.get("/comments_data", {
    article_id: articleId.value,
    page: 1,
  });
  authorUid.value = article_data.data[0].author[0].uid;
  // 文章数据----
  articleData.value = article_data.data[0];
  // 评论数据------
  commentsData.value = comments_data.data;
  // 获取点赞，评论，收藏数量-----
  const { likes, comments, collections } = article_data.data[0];
  bottomOper.value[0].text = likes;
  bottomOper.value[1].text = comments;
  bottomOper.value[2].text = collections;
  // 相关推荐游记
  const user_travels = await request.get("/rec_the_same", {
    article_id: articleId.value,
    page: 1,
  });
  userTravels.value = user_travels.data;
  await myData();
}

// 进入页面和登录成功都需要再次调用这里
async function myData() {
  // 查询该篇游记是否已点赞，已关注，已收藏
  const like_and_collection = await request.get("/like_and_collection", {
    article_id: articleId.value,
    im_concerned_uid: authorUid.value,
  });
  // 如果为202，未登录状态，收藏，点赞默认状态
  if (like_and_collection.error != "202") {
    const { like, collection, concern } = like_and_collection.data;
    bottomOper.value[0].status = like;
    bottomOper.value[2].status = collection;
    attention.value = concern;
  }
  // 获取本地缓存用户的uid
  const userInfor = localStorage.getItem("userInfor");
  if (userInfor) {
    const { uid } = JSON.parse(localStorage.getItem("userInfor"));
    userUid.value = uid;
  }
}

// 关注和取消关注作者
async function attentionAuthor() {
  if (attention.value) {
    //取消关注
    await request.get("/unfollow_author", {
      im_concerned_uid: authorUid.value,
    });
    attention.value = false;
  } else {
    //关注
    await request.get("/follow_author", { im_concerned_uid: authorUid.value });
    attention.value = true;
  }
}

// 点赞,取消点赞,收藏，取消收藏
async function operatingState(index) {
  if (index === 0) {
    //操作点赞
    if (bottomOper.value[0].status) {
      //取消点赞
      await request.get("/cancel_like", { article_id: articleId.value });
      bottomOper.value[0].status = false;
      bottomOper.value[0].text--;
    } else {
      //点赞
      await request.get("/user_like", { article_id: articleId.value });
      bottomOper.value[0].status = true;
      bottomOper.value[0].text++;
    }
  } else if (index === 2) {
    //操作收藏
    if (bottomOper.value[2].status) {
      //取消收藏
      await request.get("/cancel_collection", { article_id: articleId.value });
      bottomOper.value[2].status = false;
      bottomOper.value[2].text--;
    } else {
      //收藏
      await request.get("/collect_travel", { article_id: articleId.value });
      bottomOper.value[2].status = true;
      bottomOper.value[2].text++;
    }
  } else if (index === 1) {
    show.value = true;
  }
}

// 评论游记
async function commentTravel() {
  const res = await request.post("/comment_travel", {
    article_id: articleId.value,
    comment_content: message.value,
  });
  // 这里评论成功返回该条评论的内容
  commentsData.value.unshift(res.data);
  message.value = "";
  show.value = false;
}
// 删除自己的评论
async function deleteComment(_id, index) {
  await request.get("/comments_delete", { comment_id: _id });
  commentsData.value.splice(index, 1);
}
// 加载更多评论
const moreComments = ref("查看更多");
const page = ref(2);
async function viewMore() {
  page.value++;
  const comments_data = await request.get("/comments_data", {
    article_id: articleId.value,
    page: page.value,
  });
  // 评论数据------
  commentsData.value = [...commentsData.value, ...comments_data.data];
  moreComments.value =
    comments_data.data.length > 0 ? "查看更多" : "没有更多评论了";
}
// 登陆成功被触发
emitter.on("login-success", async () => {
  await myData();
});
// 如果用户点击了详情页的推荐就给触发
emitter.on("details-response", async (value) => {
  await detailsTravel(value._id);
  window.scrollTo({ top: 0, behavior: "smooth" });
});
// 上啦加载更多推荐
const moreRecommend = ref("查看更多");
const rec_page = ref(1);
async function onLoad() {
  rec_page.value++;
  const user_travels = await request.get("/rec_the_same", {
    article_id: articleId.value,
    page: rec_page.value,
  });
  userTravels.value = [...userTravels.value, ...user_travels.data];
  if (user_travels.data.length <= 0) {
    moreRecommend.value = "没有更多了";
  }
}
// 选择城市到pinia到定位页面
function chooseCity(city) {
  store.$patch({
    address: city,
  });
  $router.push("/found");
}
</script>

<style>
.my-swipe img {
  /* object-fit: cover;
	width: 100%; */
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 10px;
  padding: 2px 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  color: #ffffff;
}
.van-swipe-item img {
  object-fit: cover;
  width: 100%;
  height: 400px;
}
.author-view {
  padding: 10px;
  margin: 10px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(202, 126, 124, 0.2);
}
.author-view img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
}
.author-name {
  flex: 1;
  padding: 0 10px;
}
.author-name p:nth-child(2) {
  font-size: 14px;
}
.concern-author {
  background-color: gold;
  padding: 5px 10px;
  border-radius: 5px;
}
/* 所在城市 */
.article-city p {
  background-color: gold;
  margin-left: 10px;
  border-radius: 40px;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 8px;
}
.author-essay {
  margin: 20px 10px;
}
.author-essay p:nth-child(1) {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 20px;
}
.author-essay p:nth-child(2) {
  line-height: 1.5;
}
.bottom-oper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  height: 70px;
  font-size: 14px;
  color: #9f9f9f;
  border-top: 1px solid #f5f5f5;
}
.bottom-oper-feel {
  background-color: #f5f7f9;
  padding: 8px;
  flex: 1;
  margin-left: 20px;
  border-radius: 40px;
}
.oper-number img {
  width: 25px;
  height: 25px;
}
.oper-number div {
  padding: 0 15px;
}
.Comment-area {
  background-color: #f6f7f9;
  padding: 0 10px 10px 10px;
  font-size: 16px;
  margin: 0 10px;
  border-radius: 4px;
}
.Comment-users {
  padding: 20px 0;
}
.Comment-users img {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
}
.Comment-content {
  flex: 1;
  padding: 0 8px;
}
.Comment-content p:nth-child(1) {
  color: #8c8c8c;
  padding-bottom: 3px;
}
.Comment-delete {
  color: #627095;
}
.van-cell-group--inset {
  margin: 0 !important;
  border-radius: inherit !important;
}
.Comment-input {
  --van-button-small-padding: 10px 20px;
  --van-button-small-font-size: 15px;
}
.van-button--small {
  margin: 10px;
}
.View-more {
  color: #1989fa;
  text-align: center;
  font-size: 12px;
}
.rec-the-same {
  margin: 10px;
  font-size: 18px;
  font-weight: bold;
}
</style>
